<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<navigator class="swiper-item"
					:url="item.count?'/subpkg/Calculator/Calculator':'/subpkg/detail/detail?id='+item.code">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="page" :style="{height:wh+'rpx'}">
			<view class="Navigation">
				<view class="plate">
					<navigator url="../../subpkg/Calculator/Calculator">
						<image src="../../static/img/compute.png" mode="heightFix"></image>
						<span>孕期计算器</span>
					</navigator>
				</view>
				<view class="plate">
					<navigator url="../name/name">
						<image src="../../static/img/scbz.png" mode="heightFix"></image>
						<span>生辰八字</span>
					</navigator>
				</view>
				<view class="plate" @click="Moodcalendar()">
					<navigator url="">
						<image src="../../static/img/calendar.png" mode="heightFix"></image>
						<span>心情日历</span>
					</navigator>
				</view>
				
				<view class="plate" @click="gotoshop()">
					<navigator url="">
						<image src="../../static/img/Integralmall.png" mode="heightFix"></image>
						<span>积分兑换商城</span>
					</navigator>
				</view>
			</view>
			<view class="Navigation1">
				<view class="plate1">
					<navigator url="../../subpkg/rest/rest">
						<image src="../../static/img/zxsj.png" mode="heightFix"></image>
						<span>孕期宝典</span>
					</navigator>
				</view>
				
				<view class="plate1">
					<navigator url="../father/father">
						<image src="../../static/img/czsc.png" mode="heightFix"></image>
						<span>爸爸手册</span>
					</navigator>
				</view>
				
				<view class="plate1">
					<navigator url="../../subpkg/diet/diet">
						<image src="../../static/img/diet.png" mode="heightFix"></image>
						<span>饮食推荐</span>
					</navigator>
				</view>
			</view>
			

			<view class="content">
				<view class="one">
					<text class="two">强烈推出</text>
				</view>
				
				<view class="plate">
					<navigator url="../tips/tips">
						<view class="text">
							<p>急救小知识</p>
							<p>紧急情况不要慌</p>
						</view>
						<image src="../../static/img/knowledge.png" mode="widthFix"></image>
					</navigator>
				</view>

				<view class="plate" @click="gotoQuestion()">
					<navigator url="">
						<view class="text">
							<p>答题练练</p>
							<p>快来练一练！</p>
						</view>
						<image src="../../static/dati.png" mode="widthFix"></image>
					</navigator>
				</view>
				
				<view class="plate">
					<navigator url="../games/games">
						<view class="text">
							<p>情节小体验</p>
							<p>休闲时刻，放松自己</p>
						</view>
						<image src="../../static/img/game.png" mode="widthFix"></image>
					</navigator>
				</view>
				
				<view class="plate">
					<navigator url="../rengoufuwu/rengoufuwu">
						<view class="text">
							<p>在线答疑</p>
							<p>有疑问随时问</p>
						</view>
						<image src="../../static/img/answeringquestion.png" mode="widthFix"></image>
					</navigator>
				</view>
			</view>


			<view class="news" v-for="(item,i) in news" :key="item.id">
				<navigator :url="'../../subpkg/new/new?id='+item.id">
					<view class="bignew">
						<view class="new">
							<view class="text">
								<p>{{item.title}}</p>
							</view>
							<view class="pic"><img :src="item.img" mode="widthFix"></view>
						</view>
						<p>{{item.time}}</p>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				//当前设备可用高度
				wh: 0,
				// 存放轮播图数组------------可以通过后台写数据导入
				swiperList: [],
				news: [],
			}
		},
		onLoad() {
			// 获取设备高度
			const sysInfo = uni.getSystemInfoSync()
			// 屏幕总高-（100）搜索组件高度-（500）轮播图高度 
			this.wh = sysInfo.windowHeight * (750 / sysInfo.windowWidth) - 500
			this.geiswiperList()
			this.getNews()
		},
		methods: {
			...mapMutations('m_user', ['updateToken']),
			// 跳转到搜索功能的方法
			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			async geiswiperList() {
				const swiperList = await uni.$http.get('/cantlogin/getSwiperSrc')
				if (swiperList.statusCode !== 200) return uni.$showMsg()
				this.swiperList = swiperList.data
				this.swiperList.unshift({
					'image_src': '../../static/carouselImages/1.png',
					'count': true
				}, )
			},
			iflogin() {
				if (uni.getStorageSync('token') !== '') {
					uni.request({
						//api地址
						url: 'https://anmti.cn/canlogin/sinInTimes',
						//设置请求类型等于外部传入类型
						method: 'get',
						//配置请求头信息
						header: {
							"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
						},
						//请求成功
						success: (res) => {
							console.log(res);
							if (res.statusCode !== 200) return uni.$showMsg()
							if (res.data === 'nologin,canlogin') {
								this.updateToken('')
								uni.switchTab({
									url: "../../pages/my/my"
								})
								return uni.showToast({
									title: '请重新登录！',
									icon: 'none',
									duration: 2000,
								})
							}
						},
						//请求失败
						fail: (err) => {
							console.log(err);
						},
					})
				} else {
					uni.switchTab({
						url: "../../pages/my/my"
					})
					return uni.showToast({
						title: '请登录！',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			gotoQuestion() {
				this.iflogin()
				uni.navigateTo({
					url: '../../subpkg/questionnaire/questionnaire',
				})
			},
			gotoshop() {
				this.iflogin()
				uni.navigateTo({
					url: '../../subpkg/integral_mall/integral_mall',
				})
			},
			Moodcalendar() {
				this.iflogin()
				uni.navigateTo({
					url: '../../subpkg/time/time',
				})
			},
			async getNews() {
				const datas = await uni.$http.get('/cantlogin/getNews')
				if (datas.statusCode !== 200) return uni.$showMsg()
				this.news = datas.data
			},





		}
	}
</script>

<style lang="scss">
	.page {
		// background-color: #feeeed;
		margin-top: 5px;
		background-color: #f5f5f5;
		border-top: 1rpx solid #feeeed;
	}

	.one {
		width: 100%;
		height: 44px;
		margin-bottom: 10rpx;
		background-color: rgba(255, 255, 255, 0.6);
	}

	.two {
		display: flex;
		justify-content: center;
		padding-top: 20rpx;
		font-size: 32rpx;
		letter-spacing: 20rpx;
		color:	#545454;
		font-weight: 600;
	}
	span{
		margin-top: 12rpx;
		font-size: 26rpx;
		// color: 	#545454;
		color:	#545454;
	}
	swiper {
		width: 750rpx;
		height: 350rpx;

		.swiper-item,
		image {
			width: 750rpx;
			height: 350rpx;
		}

	}

	.Navigation {
		background-color: #ffffff;
		height: 130rpx;
		display: flex;
		justify-content: space-around;

		.plate {
			navigator {
				height: 130rpx;
				display: flex;
				text-align: center;
				flex-direction: column;
				justify-content: center;
				color: 	#545454;

				image {
					margin: 0 auto;
					display: flex;
					justify-content: center;
					height: 70rpx;
					width: 70rpx;
				}
			}
		}
	}
	.Navigation1 {
		background-color: #ffffff;
		height: 130rpx;
		display: flex;
		justify-content: flex-start;
	
		.plate1 {
			navigator {
				height: 130rpx;
				display:inline-block;
				margin:20rpx 42rpx;
				color: 	#545454;
				text-align: center;
	
				image {
					margin: 0 auto;
					display: flex;
					justify-content: center;
					height: 70rpx;
					width: 70rpx;
				}
			}
		}
	}
	

	.content {
		width: 730rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		.plate {
			border-radius: 10rpx;
			background-color: #ffffff;
			width: 357rpx;
			height: 180rpx;
			margin:0rpx 5rpx 10rpx 5rpx;

			navigator {
				display: flex;
				padding: 0 10rpx;
				justify-content: space-between;
				align-items: center;
				height: 200rpx;

				.text p:nth-of-type(1) {
					padding: 10rpx;
					font-size: 32rpx;
					letter-spacing: 10rpx;
					margin-bottom: 10rpx;
					font-weight: 600;
					color: 	#545454;
					// color:	#EE6AA7;
				}

				.text p:nth-of-type(2) {
					font-size: 25rpx;
					padding: 10rpx;
					color: 	#adadaf;
				}

				image {
					width: 70rpx;
				}
			}
		}

	}

	.bignew {
		width: 100%;
		// margin: 10rpx auto;
		border-top: 1px solid white;
		border-bottom: 1px solid white;
		background-color: white;
		margin-bottom: 10rpx;

		p {
			margin-left: 30rpx;
			color: #6a6a6a;
		}
	}

	.new {
		align-items: center;
		width: 730rpx;
		// margin: 10rpx;
		display: flex;
		justify-content: space-between;

		.text p {
				font-size: 28rpx;
				margin-right: 10rpx;
			}

		.pic {
			width: 250rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			img {
				width: 250rpx;
				// margin: 0 auto;
				padding-top: 30rpx;
				margin-right: 40rpx;
			}

			margin-right: 20rpx;
			margin-left: 10rpx;
		}

	}
</style>
